<template>
  <div class="center-view">
    <div class="flex center-view-flex">
      <div class="flex center-view-left">
        <div class="center-view-left-img">
          <DFDescriptions
            ref="dfDescriptionsRef"
            get-label-form="table"
            :column="3"
            :label-width="100"
            :descriptions-list="descriptionsSchemas2"
          />
          <div :class="['center-view-left-img-btn']">
            <!-- 清废单元 -->
            <div v-if="props?.machine?.hasCleanUpUnit" class="img-btn-content die-cutting-unit">
              <div
                class="btn"
                @click="openDrawerFn('adjustingSetting', 'adjustingSettingCleanUpUnit')"
              >
                {{ t('productionCenter.table.cleanUpUnit') }}
              </div>

              <img
                v-if="!cleanUpUnit?.fan && cleanUpUnit?.img"
                :src="cleanUpUnit?.img"
                class="unit-img"
              />
              <img v-if="!cleanUpUnit?.fan && !cleanUpUnit?.img" :src="paper01" class="unit-img" />

              <img
                v-if="cleanUpUnit?.fan && cleanUpUnit?.fanImg"
                :src="cleanUpUnit?.fanImg"
                class="unit-img"
              />
              <img
                v-if="cleanUpUnit?.fan && !cleanUpUnit?.fanImg"
                :src="paper01_4"
                class="unit-img"
              />
            </div>

            <!-- 模切单元 -->
            <div v-if="props?.machine?.hasDieCuttingUnit" class="img-btn-content die-cutting-unit">
              <div
                class="btn"
                @click="openDrawerFn('adjustingSetting', 'adjustingSettingDieCuttingUnit')"
              >
                {{ t('productionCenter.table.dieCuttingUnit') }}
              </div>

              <img v-if="dieCuttingUnit?.img" :src="dieCuttingUnit?.img" class="unit-img" />

              <img v-if="!dieCuttingUnit?.img" :src="paper01" class="unit-img" />

              <img
                v-if="dieCuttingUnit && dieCuttingUnit?.isUp !== null && dieCuttingUnit?.isUp"
                @click="
                  machine?.factoryChildName === 'jc20240415'
                    ? isUpFn(dieCuttingUnit, 'light')
                    : changeUnitStatusFn(dieCuttingUnit, 'isUp')
                "
                class="is-up"
                :src="upStatus"
              />

              <img
                v-if="dieCuttingUnit && dieCuttingUnit?.isUp !== null && !dieCuttingUnit?.isUp"
                @click="
                  machine?.factoryChildName === 'jc20240415'
                    ? isUpFn(dieCuttingUnit, 'light')
                    : changeUnitStatusFn(dieCuttingUnit, 'isUp')
                "
                class="is-up"
                :src="upStatus2"
              />

              <img
                :class="[`status${dieCuttingUnit?.lightTop ? '1' : '2'}`]"
                v-if="
                  dieCuttingUnit && dieCuttingUnit?.lightOn !== null && !dieCuttingUnit?.lightOn
                "
                :src="status2"
                @click="changeUnitStatusFn(dieCuttingUnit, 'lightOn')"
              />

              <img
                :class="[`status${dieCuttingUnit?.lightTop ? '1' : '2'}`]"
                v-if="dieCuttingUnit && dieCuttingUnit?.lightOn !== null && dieCuttingUnit?.lightOn"
                :src="status1"
                @click="changeUnitStatusFn(dieCuttingUnit, 'lightOn')"
              />
            </div>

            <!-- 开槽单元 -->
            <div v-if="props?.machine?.hasSlottedUnit" class="img-btn-content slotted-unit">
              <div
                class="btn"
                @click="openDrawerFn('adjustingSetting', 'adjustingSettingSlottedUnit')"
              >
                {{ t('productionCenter.table.slottedUnit') }}
              </div>

              <img v-if="slottedUnit?.img" class="unit-img" :src="slottedUnit?.img" />

              <img v-if="!slottedUnit?.img" class="unit-img" :src="paper02" />
            </div>

            <!-- 预压单元 -->
            <div v-if="props?.machine?.hasPreloadingUnit" class="img-btn-content die-cutting-unit">
              <div
                class="btn"
                @click="openDrawerFn('adjustingSetting', 'adjustingSettingPreloadingUnit')"
              >
                {{ t('productionCenter.table.preloadingUnit') }}
              </div>

              <img v-if="preloadingUnit?.img" :src="preloadingUnit?.img" class="unit-img" />
              <img v-if="!preloadingUnit?.img" :src="paper01" class="unit-img" />
            </div>

            <!-- 印刷单元 -->
            <div v-if="props?.machine?.unitNum" class="flex print-unit-view">
              <div
                v-for="(item, key) in printUnit?.list || props?.machine?.unitNum"
                :key="key"
                :class="['img-btn-content', 'print-unit']"
              >
                <div
                  class="btn"
                  @click="
                    openDrawerFn('adjustingSetting', 'adjustingSettingPrintUnit', item.id, key)
                  "
                >
                  {{ t('productionCenter.table.printUnit2').replace('xxx', key + 1) }}
                </div>
                <div
                  v-if="printUnit && printUnit?.printUniColorMap !== null"
                  class="color-view"
                  @click="openColorModalFn(item)"
                  :style="{
                    'background-color':
                      printUnit && printUnit.printUniColorMap
                        ? printUnit.printUniColorMap[item.color]
                          ? printUnit.printUniColorMap[item.color]
                          : '#E7E7E7'
                        : '#E7E7E7',
                  }"
                >
                  <div class="c-view"></div>
                </div>

                <img
                  v-if="printUnit && item.fan && item.fanImg"
                  class="unit-img"
                  :src="item.fanImg"
                />

                <img
                  v-if="printUnit && item.fan && !item.fanImg"
                  class="unit-img"
                  :src="paper03_2"
                />

                <img
                  v-if="!printUnit || (!item.fan && !item.img)"
                  class="unit-img"
                  :src="paper03"
                />

                <img v-if="printUnit && !item.fan && item.img" class="unit-img" :src="item.img" />
                <!-- <img v-if="!item.color" @click="colorBtn(key)" src="./img/paper03.png" alt="" /> -->
                <img
                  class="is-up"
                  v-if="printUnit && item.isUp !== null && item.isUp"
                  @click="
                    machine?.factoryChildName === 'jc20240415'
                      ? isUpFn(item, 'light')
                      : changeUnitStatusFn(item, 'isUp')
                  "
                  :src="upStatus"
                />
                <img
                  v-if="printUnit && item.isUp !== null && !item.isUp"
                  @click="
                    machine?.factoryChildName === 'jc20240415'
                      ? isUpFn(item, 'light')
                      : changeUnitStatusFn(item, 'isUp')
                  "
                  class="is-up"
                  :src="upStatus2"
                />
                <img
                  :class="[`status${item.lightTop ? '1' : '2'}`]"
                  v-if="printUnit && item.lightOn !== null && !item.lightOn"
                  :src="status2"
                  @click="isUpFn(item, 'light')"
                />
                <img
                  :class="[`status${item.lightTop ? '1' : '2'}`]"
                  v-if="printUnit && item.lightOn !== null && item.lightOn"
                  :src="status1"
                  @click="isUpFn(item, 'light')"
                />
              </div>
            </div>

            <!-- 送纸单元 -->
            <div v-if="props?.machine?.hasFeedingUnit" class="img-btn-content feeding-unit">
              <div
                :class="[
                  'btn',
                  'feeding-unit-btn',
                  `${
                    paperStatus === null
                      ? ''
                      : paperStatus
                      ? 'feeding-unit-btn-status1'
                      : 'feeding-unit-btn-status2'
                  }`,
                ]"
                @click="openDrawerFn('adjustingSetting', 'adjustingSettingFeedingUnit')"
              >
                <div
                  v-if="paperStatus !== null"
                  :class="['p-view', `${paperStatus ? 'p-view-status1' : 'p-view-status2'}`]"
                ></div>
                <div>
                  {{
                    t(
                      `productionCenter.table.${
                        paperStatus === null
                          ? 'feedingUnit'
                          : paperStatus
                          ? 'stopPaperFeeding'
                          : 'isPaperFeeding'
                      }`
                    )
                  }}
                </div>
              </div>
              <img
                v-if="feedingUnit && feedingUnit.img && !feedingUnit.fan"
                :src="feedingUnit.img"
              />
              <img v-if="!feedingUnit || (!feedingUnit.img && !feedingUnit.fan)" :src="paper05" />

              <img
                v-if="feedingUnit && feedingUnit.fanImg && feedingUnit.fan"
                :src="feedingUnit.fanImg"
              />
              <img v-if="feedingUnit && !feedingUnit.fanImg && feedingUnit.fan" :src="paper06" />

              <!-- <div v-if="showFullLift" class="upbutton">
                <DrawerTemplateInput
                  v-if="fullLiftOptions"
                  :data="fullLiftOptions"
                />
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="center-view-right">
        <DFDescriptions
          ref="dfDescriptionsRef"
          get-label-form="table"
          :column="3"
          :label-width="100"
          :descriptions-list="descriptionsSchemas"
        />

        <div class="center-view-left-img">
          <n-carousel
            v-if="imgList.length > 1"
            autoplay
            show-arrow
            show-dots
            draggable
            dot-type="dot"
            ref="carouselRef"
          >
            <n-image
              v-for="(item, key) in imgList"
              :key="key"
              :src="item"
              :fallback-src="paper6"
              object-fit="contain"
              preview-disabled
              :img-props="{ style: { display: 'block', cursor: 'pointer' } }"
              @click="showImagePreviewFn"
            />
          </n-carousel>

          <n-image
            v-else
            :src="imgList.length ? imgList[0] : paper6"
            object-fit="contain"
            :fallback-src="paper6"
            preview-disabled
            :img-props="{ style: { display: 'block', cursor: 'pointer' } }"
            @click="showImagePreviewFn"
          />
        </div>
      </div>
    </div>
    <div class="flex center-view-bottom">
      <DrawerTemplateInput :data="btnOptions" />
    </div>

    <ColorSelect
      v-if="printUnit && printUnit.printUniColorMap"
      ref="colorSelectRef"
      :printUniColorMap="printUnit.printUniColorMap"
      @chooseData="chooseDataFn"
    />
  </div>
</template>

<script lang="ts" setup>
  import { showImagePreview } from 'vant';
  import 'vant/es/image-preview/style';
  import DrawerTemplateInput from './Drawer/DrawerTemplateInput.vue';
  // import options from './../options/index';
  import paper6 from '@/assets/images/paper6.png';
  import { convertPdfToImageFn } from '@render/utils/pdfToImg';
  import { usePlcWithOut } from '@/store/modules/plc';
  import { useMixins } from '@/hooks/useMixins';
  import { useWsStore } from '@/store/modules/ws';
  import { storage } from '@render/utils/Storage';
  import ColorSelect from './ColorSelect.vue';
  import paper01 from '@/assets/images/productionCenter/paper01.png';

  import paper01_4 from '@/assets/images/productionCenter/paper01-4.png';
  import upStatus from '@/assets/images/productionCenter/upStatus.png';
  import upStatus2 from '@/assets/images/productionCenter/upStatus2.png';
  import status2 from '@/assets/images/productionCenter/status2.png';
  import status1 from '@/assets/images/productionCenter/status1.png';
  import paper02 from '@/assets/images/productionCenter/paper02.png';

  import paper03_2 from '@/assets/images/productionCenter/paper03-2.png';

  import paper03 from '@/assets/images/productionCenter/paper03.png';

  import paper05 from '@/assets/images/productionCenter/paper05.png';

  import paper06 from '@/assets/images/productionCenter/paper06.png';
  import { cloneDeep } from 'lodash-es';

  import { addShutdownList, getShutdownListByOrderCode } from '@/api/wip/shutdownList';
  import { msToTime } from '@render/utils/dateUtil';

  const openDrawerFn = inject('openDrawerFn', null);

  const cleanUpUnit = ref(null);

  const preloadingUnit = ref(null);

  const dieCuttingUnit = ref(null);

  const slottedUnit = ref(null);

  const printUnit = ref(null);

  const feedingUnit = ref(null);

  const paperStatus = ref(null);

  const plcClick = inject('plcClick', (_obj) => {});

  const changeUnitStatusFn = (oldData, type, value = null) => {
    // 印刷单元提升
    const data = toRaw(oldData);

    if (data && type) {
      if (data[`${type}FunId`]) {
        plcClick({
          funId: data[`${type}FunId`],
          value: value === null ? (data[`${type}`] ? 0 : 1) : value,
        });
        // timeChange(data[`${type}FunId`], 'M', data[`${type}`] ? 0 : 1);
      }
    }
  };

  const isUpFn = (item, type) => {
    if (props.machine?.factoryChildName === 'jc20240415') {
      changeUnitStatusFn(item, type, 1);
      if (type === 'light') {
        setTimeout(() => {
          changeUnitStatusFn(item, type, 0);
        }, 1000);
      }
    }

    return;
  };

  const colorSelectFunId = ref(null);

  const colorSelectRef = ref(null);

  const openColorModalFn = (item) => {
    // 印刷单元切换颜色
    colorSelectFunId.value = item.colorFunId;

    colorSelectRef.value?.openModalFn();
  };

  const chooseDataFn = (value) => {
    if (colorSelectFunId && colorSelectFunId.value && value) {
      plcClick({
        funId: colorSelectFunId.value,
        value,
      });
    }
  };

  const wsStore = useWsStore();

  const { t } = useMixins();

  const carouselRef = ref(null);

  const props = withDefaults(defineProps<Props>(), {
    chooseItem: () => null,
    machine: () => null,
    isElectron: () => false,
    btnOptions: () => null,
    adjustingSetting: () => null,
    shiftData: () => ({}),
    isAdjuest: () => null,
  });

  const emit = defineEmits(['setImgListFn','updateShutdownTimeFn']);

  // const btnOptions = options.zhuohang.zh20230829?.btn || null;

  interface Props {
    chooseItem: any;
    machine: any;
    isElectron: any;
    btnOptions: any;
    adjustingSetting: any;
    shiftData: any;
    isAdjuest: any;
  }

  const descriptionsSchemas2: any = ref([
    {
      label: 'machineStatus',
      funId: 'equipmentStatusGet',
      value: null,
    },
    {
      label: 'machineSpeed',
      funId: 'productionSpeedGet',
      value: null,
    },
    {
      label: 'shutdownNum',
      value: null,
    },
    {
      label: 'shutdownTime',
      value: null,
    },
    {
      label: 'paperFeedingStatus',
      value: null,
      span: 3,
    },
    {
      label: 'adjuestStatus',
      value: null,
      span: 3,
    },
  ]);

  const descriptionsSchemas: any = ref([
    {
      label: 'corrugatedTypeName',
      value: null,
    },
    {
      label: 'pileNum',
      value: null,
    },
    {
      label: 'cartonTypeName',
      value: null,
    },
    {
      label: 'paperThickness',
      value: null,
    },
    {
      label: 'nail',
      value: null,
    },
    {
      label: 'paperSize',
      value: null,
    },
    {
      label: 'materialStandards',
      value: null,
      span: 3,
    },
  ]);

  const machineStatusItem = descriptionsSchemas2.value.find(
    (item) => item.label === 'machineStatus'
  );

  const machineSpeedItem = descriptionsSchemas2.value.find((item) => item.label === 'machineSpeed');

  const paperStatusItem = descriptionsSchemas2.value.find((item) => item.label === 'paperStatus');

  const shutdownNumItem = descriptionsSchemas2.value.find((item) => item.label === 'shutdownNum');

  const shutdownTimeItem = descriptionsSchemas2.value.find((item) => item.label === 'shutdownTime');

  const adjuestStatusItem = descriptionsSchemas2.value.find(
    (item) => item.label === 'adjuestStatus'
  );

  const imgList: any = ref([]);

  const plcStore = usePlcWithOut();

  async function updateMachineStatusFn(isAdd=false) {
    if (machineStatusItem) {
      const { chooseItem, machine, isElectron } = props;

      const newData = isElectron
        ? plcStore.newData
        : wsStore.machineCodeObj[machine.machineCode]?.plcData;

      if (machineStatusItem.funId && newData[machineStatusItem.funId] !== undefined) {
        let machineStatusBoolVal = Number(newData[machineStatusItem.funId]) === 1;

        if (props.machine) {
          if (props.machine.machineStatusNegation === 1) {
            machineStatusBoolVal = !machineStatusBoolVal;
          }
        }

        const machineStatusVal = t(
          `productionCenter.table.${machineStatusBoolVal ? 'is' : 'stop'}Run`
        );

        if (
          chooseItem &&
          chooseItem.orderStatusCode === '30' &&
          (machineStatusVal !== machineStatusItem.value || isAdd)
        ) {
          if (isElectron) {
            await addShutdownList({
              ...toRaw(chooseItem),
              ...toRaw(props.shiftData),
              machineStatus: machineStatusBoolVal ? 1 : 0,
              machineCode: props.machine.machineCode,
            });
          }

          if (!isAdd) {
            getShutdownListByOrderCodeFn(props.chooseItem);
          }

          emit('updateShutdownTimeFn',machineStatusBoolVal)
        }

        machineStatusItem.value = machineStatusVal;
      } else {
        machineStatusItem.value = '-';
      }
    }
  }

  async function updateFn() {
    const { machine, isElectron } = props;

    const newData = isElectron
      ? plcStore.newData
      : wsStore.machineCodeObj[machine.machineCode]?.plcData;

    updateMachineStatusFn();

    if (machineSpeedItem) {
      if (machineSpeedItem.funId && newData[machineSpeedItem.funId] !== undefined) {
        machineSpeedItem.value = Number(newData[machineSpeedItem.funId]).toString();
      } else {
        machineSpeedItem.value = '-';
      }
    }

    if (paperStatusItem) {
      if (paperStatusItem.funId && newData[paperStatusItem.funId] !== undefined) {
        let paperStatusBoolVal = Number(newData[paperStatusItem.funId]) === 1;

        if (props.machine) {
          if (props.machine.paperStatusNegation === 1) {
            paperStatusBoolVal = !paperStatusBoolVal;
          }
        }

        paperStatusItem.value = t(
          `productionCenter.table.${paperStatusBoolVal ? 'is' : 'stop'}PaperFeeding`
        );
      } else {
        paperStatusItem.value = '-';
      }
    }

    const { factoryName, factoryChildName } = props.machine;

    if (factoryName === 'jinchang') {
      if (printUnit && printUnit.value && printUnit.value.list) {
        for (const item of printUnit.value.list) {
          const {
            isUpFunId = null,
            lightOnFunId = null,
            lightTopFunId = null,
            colorFunId = null,
            fanFunId = null,
          } = item;

          if (isUpFunId) {
            const isUpObj: any = newData[isUpFunId] || 0;

            if (factoryChildName === 'jc20240415') {
              item.isUp = Number(isUpObj) === 1 ? false : true;
            } else {
              item.isUp = Number(isUpObj) === 1 ? true : false;
            }

            item.isUp = Number(isUpObj) === 1 ? true : false;
          }

          if (lightOnFunId) {
            const lightOnFunIdObj: any = newData[lightOnFunId] || 0;

            item.lightOn = Number(lightOnFunIdObj) === 1 ? true : false;
          }

          if (lightTopFunId) {
            const lightTopFunIdObj: any = newData[lightTopFunId] || 0;

            if (factoryChildName === 'jc20240415') {
              item.lightTop = Number(lightTopFunIdObj) === 1 ? false : true;
            } else {
              item.lightTop = Number(lightTopFunIdObj) === 1 ? true : false;
            }
          }

          if (colorFunId) {
            const colorFunIdObj: any = newData[colorFunId] || 0;

            item.color = Number(colorFunIdObj);
          }

          if (fanFunId) {
            const fanFunIdObj: any = newData[fanFunId] || 0;

            item.fan = Number(fanFunIdObj) === 1 ? true : false;
          }
        }
      }

      if (dieCuttingUnit && dieCuttingUnit.value) {
        const {
          isUpFunId = null,
          lightOnFunId = null,
          lightTopFunId = null,
        } = dieCuttingUnit.value;

        if (isUpFunId) {
          const isUpObj: any = newData[isUpFunId] || 0;

          dieCuttingUnit.value.isUp = Number(isUpObj) === 1 ? true : false;
        }

        if (lightOnFunId) {
          const lightOnFunIdObj: any = newData[lightOnFunId] || 0;

          dieCuttingUnit.value.lightOn = Number(lightOnFunIdObj) === 1 ? true : false;
        }

        if (lightTopFunId) {
          const lightTopFunIdObj: any = newData[lightTopFunId] || 0;

          if (factoryChildName === 'jc20240415') {
            dieCuttingUnit.value.lightTop = Number(lightTopFunIdObj) === 1 ? false : true;
          } else {
            dieCuttingUnit.value.lightTop = Number(lightTopFunIdObj) === 1 ? true : false;
          }
        }
      }

      if (cleanUpUnit && cleanUpUnit.value) {
        const { fanFunId = null } = cleanUpUnit.value;

        if (fanFunId) {
          const fanFunIdObj: any = newData[fanFunId] || 0;

          cleanUpUnit.value.fan = Number(fanFunIdObj) === 1 ? true : false;
        }
      }

      if (feedingUnit && feedingUnit.value) {
        const { fanFunId = null } = feedingUnit.value;

        if (fanFunId) {
          const fanFunIdObj: any = newData[fanFunId] || 0;

          feedingUnit.value.fan = Number(fanFunIdObj) === 1 ? true : false;
        }
      }
    }
  }

  function showImagePreviewFn() {
    showImagePreview({
      images: imgList.value.length ? imgList.value : [paper6],
      closeable: true,
    });
  }

  if (props.isAdjuest === '0') {
    const index = descriptionsSchemas2.value.findIndex((item) => item.label === 'adjuestStatus');

    if (index !== -1) {
      descriptionsSchemas2.value.splice(index, 1);
    }
  }

  const shutdownList = ref([]);

  let shutdownTime = null;

  const clearshutdownTimeFn = () => {
    if (shutdownTime) {
      clearTimeout(shutdownTime);

      shutdownTime = null;
    }
  };

  const setShutdownTimeFn = () => {
    let time = 0;

    clearshutdownTimeFn();

    if (machineStatusItem.value === '-') {
      return;
    }

    shutdownList.value.forEach((item) => {
      const { shutdownStartTime, shutdownEndTime } = item;

      if (shutdownStartTime && shutdownEndTime) {
        time += shutdownEndTime - shutdownStartTime;
      } else if (!shutdownEndTime) {
        time += new Date().getTime() - shutdownStartTime;

        if (machineStatusItem.value === t(`productionCenter.table.isRun`)) {
          addShutdownList({
            ...toRaw(props.chooseItem),
            ...toRaw(props.shiftData),
            machineStatus: 1,
            machineCode: props.machine.machineCode,
          });
        } else {
          shutdownTime = setTimeout(() => {
            setShutdownTimeFn();
          }, 1000);
        }
      }
    });

    if (time) {
      shutdownTimeItem.value = msToTime(time);
    } else {
      shutdownTimeItem.value = '-';
    }
  };

  const getShutdownListByOrderCodeFn = async (chooseItem) => {
    const { data } = await getShutdownListByOrderCode({
      orderCode: chooseItem?.orderCode,
    });

    shutdownList.value = data || [];

    if (data?.length && chooseItem.orderStatusCode === '30') {
      shutdownNumItem.value = data.length;

      setShutdownTimeFn();
    } else {
      clearshutdownTimeFn();

      shutdownNumItem.value = '-';

      shutdownTimeItem.value = '-';

      shutdownList.value = [];
    }
  };

  const orderCode = ref(null);

  const baseUrl = `http://${storage.get('host')}:3000/file/`;

  const interfaceImageList = inject('interfaceImageList', ref([]));

  let initUnit = false;

  watch(
    props,
    async (val) => {
      if (val.chooseItem) {
        const {
          materialPicture,
          orderCode: cOrderCode,
          adjuestSuccessTime,
          orderStatusCode,
        } = val.chooseItem;

        orderCode.value = cOrderCode;

        for (const item of descriptionsSchemas.value) {
          if (!item.funId)
            item.value =
              val.chooseItem[item.label] !== undefined ? val.chooseItem[item.label] : '-';
        }

        if (materialPicture) {
          const materialPictureList = [];

          const pictureList = materialPicture.split(',');

          for (let i = 0; i < pictureList.length; i++) {
            const item = pictureList[i];

            const fileExtension = item.substring(item.lastIndexOf('.') + 1).toLowerCase();

            if (fileExtension === 'pdf') {
              const list: any = await convertPdfToImageFn(
                `http://${storage.get('host')}:3000/file/${item}`
              );

              materialPictureList.push(...list);
            } else {
              materialPictureList.push(`http://${storage.get('host')}:3000/file/${item}`);
            }
          }

          // materialPicture.split(',').forEach(async item => {
          //   const fileExtension = item.substring(item.lastIndexOf('.') + 1).toLowerCase();

          //   if (fileExtension === 'pdf') {
          //     console.log(111)
          //     const list:any = await convertPdfToImageFn(`http://localhost:3000/file/${item}`);

          //     materialPictureList.push(...list);

          //     console.log(list);

          //     return;
          //   }

          //   materialPictureList.push(`http://localhost:3000/file/${item}`)
          // });

          nextTick(() => {
            if (orderCode.value === cOrderCode) {
              imgList.value = materialPictureList;

              nextTick(() => {
                if (carouselRef && carouselRef.value && carouselRef.value.to) {
                  carouselRef.value.to(0);
                }
              });

              emit('setImgListFn', materialPictureList);
            }
          });
        } else {
          nextTick(() => {
            if (orderCode.value === cOrderCode) {
              imgList.value = [paper6];

              emit('setImgListFn', [paper6]);
            }
          });
        }

        if (adjuestStatusItem) {
          if (orderStatusCode === '30') {
            adjuestStatusItem.value = t(
              `productionCenter.table.${adjuestSuccessTime ? 'adjuestSuccess' : 'adjuestNow'}`
            );
          } else {
            adjuestStatusItem.value = '-';
          }
        }

        // if(orderStatusCode === '30'){

        // }

        // updateFn();
      } else {
        for (const item of descriptionsSchemas.value) {
          if (!item.funId) item.value = '-';
        }

        imgList.value = [paper6];

        emit('setImgListFn', [paper6]);

        orderCode.value = null;
      }

      if (val.adjustingSetting && !initUnit) {
        const { list = [] } = val.adjustingSetting;

        if (list && list.length) {
          for (const item of list) {
            const newItem = cloneDeep(item);

            if (newItem.imgMapKey) {
              const obj = interfaceImageList.value.find(
                (item) => item.imgCode === newItem.imgMapKey
              );

              if (obj) {
                newItem.img = `${baseUrl}${obj.imgUrl}`;
              }
            }

            switch (item.id) {
              case 'adjustingSettingDieCuttingUnit':
                dieCuttingUnit.value = newItem;
                break;
              case 'adjustingSettingSlottedUnit':
                slottedUnit.value = newItem;
                break;
              case 'adjustingSettingPrintUnit':
                printUnit.value = newItem;

                if (newItem.list && newItem.list.length) {
                  for (const nItem of newItem.list) {
                    const nObj = interfaceImageList.value.find(
                      (item) => item.imgCode === nItem.imgMapKey
                    );

                    if (nObj) {
                      nItem.img = `${baseUrl}${nObj.imgUrl}`;
                    }
                  }
                }

                break;
              case 'adjustingSettingFeedingUnit':
                feedingUnit.value = newItem;
                break;
              case 'adjustingSettingCleanUnit':
                cleanUpUnit.value = newItem;
                break;
              case 'adjustingSettingPreloadingUnit':
                preloadingUnit.value = newItem;
                break;

              default:
                break;
            }
          }
        }

        initUnit = true;
      }
    },
    { immediate: true, deep: true }
  );

  nextTick(() => {
    updateFn();
  });

  onBeforeMount(() => {
    clearshutdownTimeFn();
  });

  defineExpose({
    updateFn,
    getShutdownListByOrderCodeFn,
    updateMachineStatusFn
  });
</script>

<style lang="less" scoped>
  .center-view {
    background-color: #fff;
    border-radius: 4px;
    margin-top: 16px;

    .center-view-left,
    .center-view-right {
      // padding: 16px;
      width: 100%;
      justify-content: center;
      align-items: center;

      :deep(.df-descriptions) {
        width: 100%;
        border-bottom: 1px solid #eeeeee;
        margin-bottom: 26px;
        padding: 16px;

        .n-descriptions {
          font-size: 18px;
        }

        .n-descriptions-table-content__label {
          color: #666666 !important;
        }

        .n-descriptions-table-content {
          padding-bottom: 6px;
          padding-right: 10px;
        }
      }
    }

    .center-view-flex {
      border-bottom: 1px solid #eeeeee;
    }

    .center-view-left {
      flex-grow: 0;
      flex-shrink: 1;
      flex-basis: auto;
      border-right: 1px solid #eeeeee;

      .center-view-left-img-btn {
        display: flex;
        align-items: end;
        justify-content: center;
        position: relative;

        & > div {
          flex-shrink: 0;
        }

        .is-up {
          position: absolute;
          bottom: 86px;
          left: 0;
          width: 100% !important;
          height: 15px !important;
          object-fit: fill;
          cursor: pointer;
        }

        .status1 {
          position: absolute;
          top: 2px;
          left: 50%;
          transform: translateX(-50%);
          width: 40px !important;
          height: 40px !important;
          transition: top 3s;
          cursor: pointer;
        }

        .status2 {
          position: absolute;
          top: 24px;
          left: 50%;
          transform: translateX(-50%);
          width: 40px !important;
          height: 40px !important;
          transition: top 3s;
          cursor: pointer;
        }

        .color-view {
          position: absolute;
          z-index: 998;
          width: 68px;
          height: 68px;
          bottom: 8px;
          left: 50%;
          transform: translateX(-50%);
          border: 1px solid #b9b9b9;
          cursor: pointer;

          .c-view {
            width: 6px;
            height: 20px;
            background: #b9b9b9;
            position: absolute;
            z-index: 999;
            bottom: 30px;
            left: 4px;
          }
        }

        .unit-img {
          display: block;
          width: 100%;
          height: 100%;
        }

        .img-btn-content {
          height: 218px;
          padding: 0 3px;
          position: relative;
        }

        .die-cutting-unit {
          width: 96px;
        }

        .slotted-unit {
          width: 118px;
        }

        .print-unit {
          width: 94px;
        }

        .feeding-unit {
          width: 198px;
        }

        .p-view {
          border-radius: 50%;
          width: 8px;
          height: 8px;
          margin-right: 4px;
        }

        .p-view-status1 {
          background-color: #307AFA;
        }

        .p-view-status2 {
          background-color: #52c570;
        }

        .btn {
          width: 82px;
          height: 32px;
          background: #c7c7c7;
          border: 1px solid #000000;
          position: absolute;
          transform: translate(-50%, 0);
          left: 50%;
          bottom: 116px;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1;
          cursor: pointer;
        }

        .feeding-unit-btn {
          left: 29.6%;
        }

        .feeding-unit-btn-status1 {
          border: 1px solid #307AFA;
          color: #307AFA;
          background: #fff;
        }

        .feeding-unit-btn-status2 {
          border: 1px solid #52c570;
          color: #52c570;
          background: #fff;
        }
      }
    }

    .center-view-left-img {
      width: 100%;
    }

    .center-view-right {
      width: 100%;
      align-items: center;
      flex-grow: 1;

      .center-view-left-img {
        width: 100%;
        max-width: 500px;
        max-height: 200px;
        margin: 0 auto;

        :deep(.n-carousel),
        :deep(.n-carousel__slides),
        :deep(.n-carousel__slide),
        :deep(.n-image),
        :deep(img) {
          max-height: 200px;
        }
        :deep(.n-image) {
          width: 100%;
        }
        :deep(img) {
          width: 100%;
          object-fit: fill !important;
        }
      }
    }

    .center-view-bottom {
      :deep(.drawerTemplateData-view-item-input-margin) {
        margin: 0;
      }
    }
  }
</style>
